<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="text" v-model="val">
        <input type="text" v-model="msg">
    </div>
</body>

</html>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
<script>
    //watch:响应或者侦听vue实力上的数据变动

    let vm = new Vue({
        el: "#app",
        data: {
            val: "",
            msg: "如果说你真的要走,把我的相片还给我",
            person: {
                name: "吴签",
                hobby: "大碗面"
            }
        },
        //侦听val的变化
        //watch可获取数据更新前和更新后的结果
        //watch默认是惰性的,页面加载不会立刻回调watch函数

        //watch特点:
        //1.一次只能侦听一个数据
        //2.惰性的,页面加载不会立刻回调watch函数
        //3.没有缓存
        //和computed的区别:watch一次只能侦听一个值,computed可以一次侦听多个值,watch没有缓存,computed有缓存
        watch: {
            val(newVal, oldVal) {
                console.log('newVal===', newVal)
                console.log('oldVal====', oldVal)
            },
            msg(newVal, oldVal) {
                console.log('newVal===', newVal)
                console.log('oldVal----', oldVal)
            },
            //对于对象类型需要开启深度侦听,可以侦听对象中任意属性的变化
            person: {
                //开启深度侦听
                deep: true,
                handler(newVal) {
                    console.log('newVal===', newVal)
                }
            },
            //侦听对象中指定属性的变化
            "person.name"(newVal, oldVal) {
                console.log('newVal', newVal)
                console.log('oldVal', oldVal)
            }
        }
    })
</script>